<template>
	<view class="classify">
		<view v-if="!classifyitem.length ">
			<uni-load-more  status='loading' iconSize=30 />
		</view>
		
		<view class="classify_item">
			<template v-for="item in classifyitem" :key="item._id">
			  <navigator :url="'/pages/ImgView/ImgView?id='+item._id" class="item_img" >
			      <image class="item" :src="item.smallPicurl" mode="aspectFill"></image>
			  </navigator>
			</template>
		</view>
		<view v-if="isloading">
			<uni-load-more  status='noMore' iconSize=30 />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad,onReachBottom ,onUnload} from '@dcloudio/uni-app'
import {RequestClassifyitem,RequestHistorlist} from '@/apis/apis.js'
import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
let isloading=ref(false)
let classifyitem = ref([]) //数据
const total=ref(0)  //总条数
const classifydata={
	pageNum:1, //页数
	pageSize:12, //条数
}
let sharename
onLoad((e)=>{
	console.log('@@@@@@@@@',e);//打印出上个页面传递的参数。
	let {id=null,name=null,type=null}=e
	console.log(id,name);
	// type是我的页面传来的
	if(type){
		classifydata.type=type
	}
	// id是分类页面传递的来的
	if(id){
		classifydata.classid=id
	}
    sharename =	name
	// 改变最顶端导航栏标题api
	uni.setNavigationBarTitle({
		title:name
	})

	getclassifylist()
})
// 获取分类item数据
async function getclassifylist(){
	let res
	if(classifydata.type){
		 res=await RequestHistorlist(classifydata)
		// console.log(res);
		//  if(res.data.data){
		// 	isloading.value=true
		// }
	}
	if(classifydata.classid){
	     res=await RequestClassifyitem(classifydata)
	}
	  // console.log("22222",res);           
	 classifyitem.value=[...classifyitem.value , ...res.data.data]
	 uni.setStorageSync('classifyimgstorage', classifyitem.value)
	 total.value=res.data.total
	 uni.hideLoading()
}

// 触底刷新
onReachBottom(()=>{
	if(classifydata.pageNum*classifydata.pageSize >=total.value){
		uni.showToast({
			title: '没有更多数据了...',
			icon:'none',
			duration:1000
		});
		isloading.value=true
	}else{
		uni.showLoading({
				title: '加载中',
				mask:true
			})
			classifydata.pageNum++
			getclassifylist()
	}
	
})

// 分享朋友
onShareAppMessage(()=>{
	return {
	      title: '小冰壁纸库',
	      path: 'pages/classifyItem/classifyItem?id='+classifydata.classid+'&name='+sharename,
		  // imageUrl:'../../static/3.png'
	    }
})
// 分享朋友圈
onShareTimeline(()=>{
	return {
	      title: '小冰壁纸库',
	      query:'id='+classifydata.classid+'&name='+sharename
	    }
})

onUnload(()=>{
	uni.removeStorageSync('classifyimgstorage')
})
</script>

<style lang="scss" scoped>
.classify{
	.classify_item{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 10rpx;
		// background-color: lawngreen;
		.item_img{
			height: 430rpx;
			border-radius: 10rpx;
			overflow: hidden;
			.item{
			width: 100%;
			height: 100%;
			display: block;
			
		    }
		}
		
	}
}
</style>
